<template>
  <el-tabs type="border-card" :value="current" @tab-remove="removeTab" @tab-click="changeTab">
    <el-tab-pane v-for="item in tabs" :key="item.code" :label="item.name" :name="item.code" :closable="item.closable">
      <component v-bind:is="item.template"></component>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: 'content',
  computed: {
    tabs() {
      return this.$store.state.tabs
    },
    current() {
      return this.$store.state.currentCode
    }
  },
  methods: {
    removeTab(name) {
      // 关闭选项卡
      this.$store.commit('close', name)
    },
    changeTab(data) {
      // 切合选秀卡
      this.$store.commit('change', data.name)
    }
  }
}
</script>
<style lang='less'>
  .el-tabs__content{
    padding: 0 !important;
    height: calc(~"100% - 42px");

    .el-tab-pane{
      width: 100%;
      height: 100%;

      iframe{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
